<template>
  <div class="background">
    <Header ref="child">111</Header>
    <div class="all">
      <el-row :gutter="20">
        <el-col :span="2">
          <div class="grid-content">
            <!--<Left></Left>-->
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content">
            <h1 align="center" v-html="this.blog.blogTitle">
              {{ this.blog.blogTitle }}
            </h1>
            <h4 align="right">
              作者: {{ this.blog.author }}
              <el-divider direction="vertical"></el-divider>
              浏览次数:
              {{ this.blog.blogRead }}次
            </h4>
            <el-divider></el-divider>
            <el-row :gutter="20">
              <el-col :span="4"><h3>博客简介:</h3></el-col>
              <el-col :span="16"
              ><h3>{{ this.blog.blogRemark }}</h3></el-col
              >
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="20">
              <el-col :span="4"><h3>博客类型:</h3></el-col>
              <el-col :span="16"
              ><h3>{{ this.blog.blogType }}</h3></el-col
              >
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="20">
              <el-col :span="4"><h3>博客封面:</h3></el-col>
              <el-col :span="16"
              >
                <el-image :src="this.blog.blogImage"></el-image
                >
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="20">
              <el-col :span="4"><h3>博客内容:</h3></el-col>
              <el-col :span="16"
              ><p v-html="this.blog.blogContent">
                {{ this.blog.blogContent }}
              </p></el-col
              >
            </el-row>
            <div style="height: 5px;background: #0c080a;margin: 20px 0"></div>
            <!-- TODO 评论功能-->
            <div>
              <!--发表评论-->
              <el-input
                placeholder="请输入评论内容"
                v-model="contentVo.content">
                <el-button slot="append" @click="commitContent">评论</el-button>
              </el-input>
              <!--评论显示-->
              <el-divider content-position="center">评论区</el-divider>
              <div v-for="(item,index) in contentList" :key="index">
                <h4>
                  {{item.userName}}: {{item.content}}<span style="float:right;">{{item.lastUpdateDate}}  <el-button v-if="item.userName===userName" size="mini" type="danger" @click="openDialog(item.contentId)">删除</el-button></span>
                </h4>
                <el-divider></el-divider>
              </div>
            </div>
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%">
              <span>确定删除这条评论吗？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteContent">确 定</el-button>
              </span>
            </el-dialog>
            <!--评论分页-->
            <div class="paging">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                @current-change=page>
              </el-pagination>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content">
            <el-card class="box-card">
              <div>
                <el-button type="success">
                  <router-link
                    :to="{ path: '/' }"
                    style="text-decoration: none"
                  >
                    返回首页
                  </router-link>
                </el-button>
              </div>
            </el-card>
            <!--<Right :typeList='typeList'></Right>-->
          </div>
        </el-col>
      </el-row>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Left from '../home/Left'
import Right from '../home/Right'
import Header from '../common/Header'
import Footer from '../common/Footer'
import Blog from '../common/Blog'
// eslint-disable-next-line no-unused-vars
import background from '../../assets/css/background.css'

export default {
  name: 'BlogDetails',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Left,
    // eslint-disable-next-line vue/no-unused-components
    Right,
    Header,
    Footer,
    // eslint-disable-next-line vue/no-unused-components
    Blog
  },
  data () {
    return {
      blog: {
        blogTitle: '',
        blogImage: '',
        blogContent: '',
        blogType: '',
        blogRemark: ''
      },
      contentVo: {
        content: '',
        userId: '',
        blogId: '',
        userName: ''
      },
      currentPage: 1,
      pageSize: 5,
      total: 0,
      contentList: [],
      userName: '',
      dialogVisible: false,
      delConId: ''
    }
  },
  methods: {
    getBlog () {
      console.log(this.$route)
      const blogId = this.$route.params.blogId
      const _this = this
      this.$axios.get('/blog/' + blogId, { params: { isEdit: false } }).then((res) => {
        _this.blog = res.data.data
        // var MarkdownIt = require('markdown-it'),
        // md = new MarkdownIt();
        // var result = md.render(_this.blog.content);
        // _this.blog.content = result
      })
    },
    commitContent () {
      this.contentVo.blogId = this.$route.params.blogId
      this.contentVo.userId = this.$refs.child.user.userId
      this.contentVo.userName = this.userName
      this.$axios.post('/content/commitContent', this.contentVo).then((res) => {
        this.$message.success(res.data)
        this.queryContent(0)
        this.contentVo.content = ''
      }).catch((err) => {
        this.$message.error(err.data)
      })
    },
    queryContent (currentPage) {
      this.$axios.get(`/content/${currentPage}/${this.pageSize}/${this.$route.params.blogId}`).then((res) => {
        console.log(res.data)
        this.currentPage = res.data.currentPage
        this.total = res.data.totalSize
        this.contentList = res.data.data
        this.userName = this.$refs.child.user.name
      }).catch((err) => {
        console.log(err)
      })
    },
    page (currentPage) {
      this.queryContent(currentPage)
    },
    deleteContent () {
      this.$axios.get('/content/deleteContent/' + this.delConId).then((res) => {
        this.$message.success(res.data)
        this.dialogVisible = false
        this.queryContent(0)
      }).catch((err) => {
        this.$message.error(err.data)
      })
    },
    openDialog (contentId) {
      this.dialogVisible = true
      this.delConId = contentId
    }
  },
  created () {
    if (this.$route.params.isSearch) {
    } else {
      this.getBlog()
      this.queryContent(0)
    }
  }
}
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    margin: 0 auto;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .all {
    margin: 10px 5px;
  }

  .paging {
    margin: 5px auto;
    text-align: center;
  }
</style>
